<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" size="medium" label-width="100px">
        <el-col :span="12">
          <el-form-item label="请输入专业" prop="field101">
            <el-autocomplete
              :fetch-suggestions="querySearch"
              placeholder="请输入专业名称"
              v-model="department.name"
              trigger-on-focus="false"></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="请输入专业" prop="field102">
            <el-autocomplete
              :fetch-suggestions="querySearch"
              placeholder="请输入专业名称"
              v-model="department.names"
              trigger-on-focus="false"></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">对比</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-table v-if="contrast"
              :data="postList"
              border
              style="width: 100%"
              :cell-style="cellStyle">
      <el-table-column
        prop="name"
        label="专业"
        width="295"
        class="one">
      </el-table-column>
      <el-table-column
        prop="departmentType"
        label="专业类别"
        width="295">
      </el-table-column>
      <el-table-column
        prop="employmentDirection"
        label="就业方向"
        width="295">
      </el-table-column>
      <el-table-column
        prop="postgraduateEntranceExaminationDirection"
        label="考研方向"
        width="295">
      </el-table-column>
      <el-table-column
        prop="averageSalary"
        label="平均资薪"
        width="295">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { listPost, getPost, delPost, addPost, updatePost,contrast,departmentFind } from "@/api/system/department";
import {listDepartment} from "../../../api/system/department";


export default {
  components: {},
  props: [],
  data() {
    return {
      two:true,
      averageSalary1:false,
      averageSalary2:false,
      departmentOnes:{},
      departmentOne:{},
      departmentList:[],
      inputValue:"",
      inputValues:"",
      departments:{},
      department:{},
      postList:[],
      contrast:false,
      tableData:{},
      formData: {
        field101: undefined,
        field102: undefined,
      },
      rules: {
        field101: [{
          required: true,
          message: '请输入专业',
          trigger: 'blur'
        }],
        field102: [{
          required: true,
          message: '请输入专业',
          trigger: 'blur'
        }],
      },
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    cellStyle(row, column, rowIndex, columnIndex){
      if (row.columnIndex == 4) {
        if (row.rowIndex == 0) {
          if (this.averageSalary1) {
            return "color: #ff4b18"
          }
        }
        if (row.rowIndex == 1) {
          if (this.averageSalary2) {
            return "color: #ff4b18"
          }
        }
      }
    },
    PercentageContrast(a,b){
      return Number(a.replace("%",""))>=Number(b.replace("%",""))
    },
    querySearch(queryString, cb){
      console.log(queryString)
      if (queryString==""){
        queryString=1
      }
      this.departments.name=queryString
      listDepartment(this.departments).then(response => {
        this.valueList=response.rows
        let s=this.valueList.map(item =>{
          let res={};
          res.value=item.name;
          return res;
        })
        cb(s)
      })
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
      this.contrast=true
      console.log(this.department.name)
      console.log(this.department.names)
      contrast(this.department.name,this.department.names).then(response=>{
        this.postList=response.rows
        if (this.PercentageContrast(this.postList[0].averageSalary,this.postList[1].averageSalary)){
          this.averageSalary1=true
          this.averageSalary2=false
        }else {
          this.averageSalary2=true
          this.averageSalary1=false
        }
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.contrast=false
      this.averageSalary1=false
      this.averageSalary2=false
      this.department={
        name:undefined,
        names:undefined
      }
    },
  }
}

</script>
<style>
.one{
  color: #ff4b18;
}
</style>
